<template>
  <div class="dmt-box flex full_h">
    <div class="dmt-box-item full_h left-box">
      <div class="sidebar-title">设备分类</div>
      <div
        @click="selectCategory(item.categoryId)"
        class="category-list full_w"
        v-for="(item, i) in deviceCategoryList"
        :key="i"
      >
        <el-tooltip  :content="item.label" placement="right-end" effect="light">
          <div
            class="category-item active flex full_w bs fl-up-down-ct"
            :class="{ categoryAct: activeCategoryId == item.categoryId }"
          >
            <!-- <span class="category-icon"></span> -->
            <i class="el-icon-setting padd-rt7"></i>
            <div class="lable-out f1">
              <div class="ellipsis full_w">
                {{ item.label }}
              </div>
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="dmt-box-item full_h f1 padd-15 flex col">
      <!-- 顶部操作栏 -->
      <div class="top-bar">
        <div class="search-box">
          <span class="search-icon">🔍</span>
          <input type="text" placeholder="搜索设备名称、型号..." />
        </div>
        <el-button class="add-btn" @click="addDiveces">
          <span class="add-icon">+</span>
          <span>添加设备</span>
        </el-button>
      </div>
      <div class="device-section f1">
        <!-- 设备列表区域 -->
        <div class="section-header">
          <h3 class="section-title">生产设备</h3>
          <!-- <div class="section-actions">
            <button class="action-btn">备注</button>
            <button class="action-btn">配置</button>
          </div> -->
        </div>

        <div class="device-list" v-if="deviceManageList.length">
          <!-- 设备卡片1 -->
          <div
            class="device-card"
            v-for="(item, i) in deviceManageList"
            :key="i"
          >
            <div class="device-header">
              <div class="device-name">{{ item.deviceName }}</div>
              <div class="device-model">型号: {{ item.deviceModel }}</div>
            </div>
            <div class="device-info">
              <div>数量: {{ item.quantity }}台</div>
              <!-- 待确认是否需要 -->
              <!-- <div>状态: 运行中</div> -->
            </div>
            <div class="device-actions">
              <button class="edit-btn edit-btn-pre" @click="edit(item)">编辑</button>
              <button class="delete-btn">删除</button>
            </div>
          </div>
        </div>
        <div class="text-ct" v-else>暂无数据</div>
      </div>
      <el-pagination
        class="flex flex_rt"
        background
        layout="prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="currMode > 0 ? '编辑设备信息' : '新增设备信息'"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main">
        <div
          class="edit-main-head"
          style="max-height: calc(80vh - 60px); overflow-y: auto"
        >
          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">设备基本信息</span>
            <!-- <el-button type="mini">{{
              currMode > 0 ? "编辑" : "新增"
            }}</el-button> -->
          </div>

          <div class="out-basic-info padd-up-down-15">
            <div class="basic-info padd-15 bg">
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-col :span="12">
                    <el-form-item label="设备类别">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.categoryName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.deviceName"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="设备型号">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.deviceModel"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="参数">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.params"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>

          <!-- 维护周期 -->
          <div class="section">
            <div class="edit-tit flex fl-up-down-ct">
              <span class="padd-lt">维护周期</span>
              <el-button
                @click="handleMaint"
                class="maintenance-btn"
                id="setMaintenanceBtn"
                type="mini"
              >
                设置维保周期</el-button
              >
            </div>
            <div class="maintenance-section">
              <div class="maintenance-content">
                <div></div>
                <!-- <div class="maintenance-text">参数：电压:220V,功率:2.5KW</div> -->
                <!-- <button
                  @click="handleMaint"
                  class="maintenance-btn"
                  id="setMaintenanceBtn"
                >
                  设置维保周期
                </button> -->
              </div>

              <!-- 新增：维保计划展示区域 -->
              <div class="maintenance-plan">
                <div class="plan-title">
                  <span>当前维保计划</span>
                  <span id="planCount"
                    >{{ baseForm.maintCycleList.length }} 个项目</span
                  >
                </div>
                <div class="plan-list" id="planList">
                  <!-- 只显示 data1 字段 -->
                  <div
                    v-if="baseForm.maintCycleList.length > 0"
                    class="plan-tags"
                  >
                    <div
                      v-for="(item, index) in baseForm.maintCycleList"
                      :key="index"
                      class="plan-tag"
                    >
                      <span class="tag-text">{{ item.maintType }}-</span>
                      <!-- <span class="tag-cycle" v-if="item.period"
                        >{{ item.value }} {{ getCycleText(item.period) }}</span
                      > -->
                      <span class="tag-cycle" v-if="item.period"
                        >{{ item.value }} {{ item.period }}</span
                      >
                    </div>
                  </div>
                  <div v-else class="empty-plan" id="emptyPlan">
                    暂无维保计划，点击上方按钮添加
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="edit-tit">
            <span class="padd-lt">设备信息</span>
          </div>
          <div class="table-container padd-up-down-15">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="baseForm.equipInfoList"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="groupEquipmentCardNo"
                label="集团设备卡编号"
              ></el-table-column>
              <el-table-column
                prop="fixedAssetNo"
                label="周定资产编号"
              ></el-table-column>
              <el-table-column
                prop="fixedAssetCardNo"
                label="固定资产卡片号"
              ></el-table-column>
              <el-table-column
                prop="commissioningDate"
                label="启用日期"
              ></el-table-column>
              <el-table-column
                prop="usageLocation"
                label="在用地点"
              ></el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span
                    :class="[
                      { 'status-running': scope.row.status==1 },
                      { 'status-other': scope.row.status==2 },
                    ]"
                    >{{ statusMapp[scope.row.status] }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope>
                  <el-button type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div slot="footer" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button size="mini" @click="handleEditSave" type="primary"
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      custom-class="main-maint-custom"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="设置维保周期"
      :visible.sync="isMaintDialog"
      width="70%"
      :before-close="handleMaintClose"
    >
      <div class="main-maint edit-main">
        <div
          style="max-height: calc(80vh - 150px); overflow-y: auto"
          class="abmain-maint-tle padd-bt15 f1"
        >
          <el-form :model="formTable" ref="ruleFormTable">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="formTable.maintTableData"
              style="width: 100%"
            >
              <el-table-column label="维保类型">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].maintType`"
                    :rules="rulesTable.maintType"
                  >
                    <el-input
                      @blur="
                        validateField(
                          `maintTableData[${scope.$index}].maintType`
                        )
                      "
                      clearable
                      v-model="scope.row.maintType"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数值">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].value`"
                    :rules="rulesTable.value"
                  >
                    <el-input clearable v-model="scope.row.value"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column width="280px" label="周期">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`maintTableData[${scope.$index}].period`"
                    :rules="rulesTable.period"
                  >
                    <el-radio-group v-model="scope.row.period">
                      <el-radio label="年">年</el-radio>
                      <el-radio label="月">月</el-radio>
                      <el-radio label="日">日</el-radio>
                      <el-radio label="周">周</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="handleDelMaint(scope.$index)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div
          slot="footer"
          style="
            height: 150px;
            padding-top: 15px;
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
            background: #fff;
            box-sizing: border-box;
            margin: 0 -15px;
          "
        >
          <div class="padd-lt">
            <el-button class="maint-btn" size="mini" @click="handleAddMaint"
              >+添加维保计划</el-button
            >
          </div>
          <div class="modal-footer flex" style="margin: 15px 0 0 0">
            <el-button size="mini" @click="handleMaintClose">取消</el-button>
            <el-button size="mini" @click="handleMaintSubmit" type="primary"
              >确认</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 左侧设备分类列表：新增 categoryId 作为唯一标识
      deviceCategoryList: [
        { categoryId: "demo", label: "演示用设备", isActive: false },
        { categoryId: "production", label: "生产设备", isActive: true },
        { categoryId: "electronic", label: "电子设备", isActive: false },
        { categoryId: "transport", label: "运输工具", isActive: false },
        { categoryId: "instrument", label: "仪器及试验设备", isActive: false },
        { categoryId: "tool", label: "工具仪器及生产用具", isActive: false },
        { categoryId: "road", label: "一期扩建道路", isActive: false },
        { categoryId: "land", label: "土地_使用权", isActive: false },
        { categoryId: "decoration", label: "装修工程", isActive: false },
        { categoryId: "office", label: "办公设备", isActive: false },
        { categoryId: "other", label: "其他固定资产", isActive: false },
        { categoryId: "building", label: "建筑物", isActive: false },
        { categoryId: "roadway", label: "道路", isActive: false },
        { categoryId: "house", label: "房屋", isActive: false },
      ],
      deviceManageList: [],
      // 右侧设备管理列表：新增 categoryId 关联左侧分类
      allDeviceList: [
        // 原始全量设备列表
        {
          deviceName: "电冰箱",
          deviceModel: "XXX",
          quantity: 10,
          categoryId: "electronic",
          categoryName: "电子设备",
          params: "",
          maintCycleList: [
            {
              maintType: "清洗",
              value: 1,
              period: "周",
            },
            {
              maintType: "校准",
              value: 2,
              period: "周",
            },
            {
              maintType: "年检",
              value: 1,
              period: "年",
            },
          ],
          equipInfoList: [
            {
              serialNumber: 1,
              groupEquipmentCardNo: "111111",
              fixedAssetNo: "112",
              fixedAssetCardNo: "113",
              commissioningDate: "2023-11-10 00:00:00",
              usageLocation: "2",
              status: "1",
            },
            {
              serialNumber: 2,
              groupEquipmentCardNo: "111",
              fixedAssetNo: "111",
              fixedAssetCardNo: "111",
              commissioningDate: "2023-10-26 00:00:00",
              usageLocation: "111",
              status: "1",
            },
            {
              serialNumber: 3,
              groupEquipmentCardNo: "11124",
              fixedAssetNo: "1231",
              fixedAssetCardNo: "124",
              commissioningDate: "2023-10-27 00:00:00",
              usageLocation: "152",
              status: "2",
            },
          ],
        },
        {
          deviceName: "管道",
          deviceModel: "XXX",
          quantity: 5,
          categoryId: "building",
          categoryName: "建筑物",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "铝合金楼梯",
          deviceModel: "XXX",
          quantity: 0,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "铝合金楼梯",
          deviceModel: "",
          quantity: 0,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "奥克斯1.5P挂式空调",
          deviceModel: "",
          quantity: 0,
          categoryId: "electronic",
          categoryName: "电子设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "1#潜污泵",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "过滤器",
          deviceModel: "",
          quantity: 1,
          categoryId: "instrument",
          categoryName: "仪器及试验设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "9#气动蝶阀",
          deviceModel: "XXX",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "10#气动通风蝶阀",
          deviceModel: "XXX",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "1#潜污泵",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "电动球阀",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "法兰PN1.0",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "手动球阀",
          deviceModel: "",
          quantity: 4,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "2#离心污泥脱水机",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "多功能水泵控制阀",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },
        {
          deviceName: "气动双法兰蝶阀",
          deviceModel: "",
          quantity: 1,
          categoryId: "production",
          categoryName: "生产设备",
          params: "",
          maintCycleList: [],
          equipInfoList: [],
        },

        // 更多设备...
      ],
      activeCategoryId: "production",
      deviIdenti: "0",
      currMode: 0,

      baseForm: {
        maintCycleList: [],
        equipInfoList: [],
      },
      radio1: "",
      radio2: "",
      radio3: "",
      radio4: "",

      isMaintDialog: false,
      isEditDialog: false,

      deviceList: [
        {
          label: "生产设备",
        },
        {
          label: "电子设备",
        },
        {
          label: "运输工具",
        },
        {
          label: "内置及改造设备",
        },
        {
          label: "一键扩展通道",
        },
        {
          label: "主线、通用区",
        },
        {
          label: "装配工程",
        },
        {
          label: "办公设备",
        },
        {
          label: "其他操作类产品",
        },
      ],
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中",
      },

      formTable: {
        maintTableData: [],
      },
      ruleFormTable: null,
      rulesTable: {
        maintType: [
          {
            required: true,
            validator: this.validateMaintenanceType,
            trigger: ["blur", "change"],
          },
        ],
        value: [
          {
            required: true,
            validator: this.validateMaintenanceValue,
            trigger: ["blur", "change"],
          },
        ],
        period: [
          {
            required: true,
            validator: this.validateMaintenancePeriod,
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  mounted() {
    this.filterDeviceList();
  },
  methods: {
    addDiveces() {
      this.currMode=0;
      this.isEditDialog = true;
      this.baseForm = {
        maintCycleList: [],
        equipInfoList: [],
      };

      // this.baseForm.categoryName=
    },
    selectCategory(e) {
      this.activeCategoryId = e;
      this.filterDeviceList();
    },
    filterDeviceList() {
      this.deviceManageList = this.allDeviceList.filter(
        (v) => v.categoryId == this.activeCategoryId
      );
    },
    // 验证器函数移到 methods 中
    validateMaintenanceType(rule, value, callback) {
      if (!value) {
        return callback(new Error("维保类型不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenanceValue(rule, value, callback) {
      if (!value) {
        return callback(new Error("数值不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenancePeriod(rule, value, callback) {
      if (!value) {
        return callback(new Error("周期不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    validateField(e) {
      console.log("验证字段:", e);
    },
    // 添加周期文本转换方法
    getCycleText(value) {
      const cycleMap = {
        1: "年",
        2: "月",
        3: "日",
        4: "周",
      };
      return cycleMap[value] || "";
    },
    edit(row) {
      console.log("编辑设备",row);
      this.currMode=1;
      this.isEditDialog = true;
      this.baseForm = JSON.parse(JSON.stringify(row));
    },
    handleMaint() {
      this.isMaintDialog = true;
      this.formTable.maintTableData = JSON.parse(
        JSON.stringify(this.baseForm.maintCycleList)
      );
      console.log(' this.formTable', this.formTable);
    },

    handleEditClose() {
      console.log("关闭编辑窗口");
      
      this.isEditDialog = false;
    },
    handleEditSave() {
      this.isEditDialog = false;
      console.log("保存-后端数据保存",this.baseForm);
    },
    handleAddMaint() {
      this.$nextTick(() => {
        const container = document.querySelector(".abmain-maint-tle");
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate((valid) => {
        if (valid) {
          this.formTable.maintTableData.push({
            maintType: "",
            value: "",
            period: "",
          });
          console.log("提交表单");
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    handleDelMaint(e) {
      this.formTable.maintTableData.splice(e, 1);
    },
    handleMaintClose(e) {
      this.isMaintDialog = false;
    },
    handleMaintSubmit(e) {
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate((valid) => {
        if (valid) {
          this.baseForm.maintCycleList = JSON.parse(
            JSON.stringify(this.formTable.maintTableData)
          );
          console.log("提交表单------给后端", this.baseForm);
          this.isMaintDialog = false;
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.dmt-box-item:first-child {
  max-width: 190px;

  background: #fff;

  .sidebar-title {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }
  .category-list:hover {
    color: #fff;
    cursor: pointer;
    background: #dddde2;
  }
  .categoryAct {
    color: #fff;
    background: #c6c6de;
  }
}
.dmt-box-item {
  box-sizing: border-box;
  border-right: 1px solid #eee;
}
.category-item {
  padding: 10px 8px;
  padding-left: 15px;
}
/* 顶部操作栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 8px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 400px;
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  padding: 5px 10px;
  font-size: 14px;
}

.search-icon {
  color: #999;
  font-size: 16px;
}
/* 设备列表区域 */
.device-section {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  border-left: 5px solid #1a4b8c;
  padding-left: 10px;
}

.section-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

/* 设备列表 */
.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  box-sizing: border-box;
  // border: 1px solid red;
}

.device-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 15px;
  transition: all 0.3s;
}

.device-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-name {
  font-weight: bold;
  font-size: 16px;
  color: #2c3e50;
}

.device-model {
  color: #666;
  font-size: 14px;
}

.device-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.device-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.edit-btn,
.delete-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.delete-btn {
  background-color: #fff2f0;
  color: #ff4d4f;
}
.add-btn {
  // background: linear-gradient(135deg, #4a90e2 0%, #7b68ee 100%);
  background-color: var(--color-left-bg);
  color: #eee;
}
// dialog
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__header {
  background-color: #1a4b8c;
  font-size: 16px;
  span {
    font-weight: bold;
    color: #fff !important;
  }
  button {
    font-size: 20px;
    i,
    i:hover {
      color: #fff;
    }
  }
}
.edit-main {
  padding: 15px 15px 0;
  box-sizing: border-box;
  .edit-tit {
    border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
}
.bg {
  background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  background-color: #f8f9fa;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

.status-running {
  color: #52c41a;
  background-color: #f6ffed;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-other {
  color: #fa8c16;
  background-color: #fff7e6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
// dialog 维保
::v-deep .main-maint-custom {
  margin-top: 20vh !important;
}
.maintenance-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin: 10px 0 20px 0;
}

.maintenance-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.maintenance-text {
  font-size: 16px;
}

.maintenance-btn {
  background: #1a4b8c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.maintenance-btn:hover {
  background: #1a4b8c;
}
/* 新增：维保计划展示区域 */
.maintenance-plan {
  // margin-top: 20px;
  padding: 15px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

.plan-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1a4b8c;
}

.plan-info {
  display: flex;
  flex-direction: column;
}

.plan-type {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.plan-cycle {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.plan-actions {
  display: flex;
  gap: 10px;
}

.edit-plan,
.delete-plan {
  background: none;
  border: none;
  // color: #1a4b8c;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.edit-plan:hover,
.delete-plan:hover {
  background: rgba(44, 128, 255, 0.1);
}

.empty-plan {
  text-align: center;
  color: #999;
  padding: 30px;
  font-style: italic;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 10px;
  transition: background 0.2s;
}

.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.lable-out {
  min-width: 0;
  box-sizing: border-box;
}
// 共同
::v-deep .el-dialog {
  position: fixed !important;
  margin: 0 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>